<template>
  <el-container class="layout">
    <el-aside class="aside" :class="{'aside-narrow': isCollapse}" style="width: 240px">
      <router-link to="/" class="logo" :class="{'logo-img': isCollapse}">
        <span v-if="!isCollapse">数字档案室应用系统(DAAS)</span>
        <img :src="logoSrc" width="50" alt=""/>
      </router-link>
      <left-nav :navList="navList" :navLoading="navLoading"></left-nav>
    </el-aside>
    <el-container>
      <el-header class="header">
        <i class="menu-icon el-icon-s-fold" :class="{'is-narrow': isCollapse}" @click="handleMenuWidth"></i>
        <div class="head-box">
          <el-tooltip class="item"
                      effect="dark"
                      content="主题"
                      placement="bottom">
            <i class="iconfont icon-pifu"
               :class="{'is-def': isDefault === '0'}"
               @click="handleSwitchPifu"></i>
          </el-tooltip>
          <el-dropdown class="user" @command="handleToPage">
            <span class="el-dropdown-link">
              {{userInfo ? userInfo.nickName : ''}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="user-dropdown" >
              <el-dropdown-item command="/">首页</el-dropdown-item>
              <el-dropdown-item command="/systemSettings/userInfo">个人信息</el-dropdown-item>
              <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <!--<div class="crumbs-nav">
        <tags-nav></tags-nav>
      </div>-->
      <el-main class="main">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import LeftNav from './framework/leftNav/leftNav'
import { getScreen } from '../util/getScreen'
import { mapActions } from 'vuex'
import { mapFields } from 'vuex-map-fields'
// import TagsNav from './framework/tagsNav/tagsNav'

export default {
  name: 'Layout',
  components: { LeftNav },
  data () {
    return {
      isDefault: '0',
      logoSrc: require('@/assets/' + window.service.logoSrc + '-logo.png')
    }
  },
  mounted () {
    this.isDefault = localStorage.getItem('defaultTheme')
    this.setTheme()
    this.getUserInfo()
    window.onresize = () => {
      this.setNavNarrow(getScreen() <= 2)
    }
    this.handleGetNav()
  },
  computed: {
    ...mapFields('profile/leftNav', {
      navList: 'retrieved',
      navLoading: 'loading'
    }),
    ...mapFields('profile/navNarrow', {
      isCollapse: 'retrieved'
    }),
    ...mapFields('profile/profile', {
      userInfo: 'retrieved'
    })
  },
  methods: {
    ...mapActions('profile/leftNav', ['getNav']),
    ...mapActions('profile/navNarrow', ['setNavNarrow']),
    ...mapActions('profile/tags', ['addTags']),
    ...mapActions('profile/profile', ['loginOut', 'getUserInfo']),
    handleGetNav () {
      // 获取左侧导航栏
      this.getNav()
      this.addTags(this.$route)
    },
    handleToPage (path) {
      // 跳转页面
      if (path === 'loginOut') {
        // 退出登录
        this.loginOut().then(() => {
          this.$router.push('/login')
        })
        return
      }
      this.$router.push(path)
    },
    handleMenuWidth () {
      // 展开和收起左侧导航栏
      this.setNavNarrow(!this.isCollapse)
    },
    handleSwitchPifu () {
      // 切换皮肤
      this.isDefault = this.isDefault === '0' ? '1' : '0'
      console.log(this.isDefault)
      localStorage.setItem('defaultTheme', this.isDefault)
      this.setTheme()
    },
    setTheme () {
      document.documentElement.setAttribute(
        'data-theme',
        'theme' + (this.isDefault === '0' ? '' : this.isDefault)
      )
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../styles/skin/skin";
</style>
